

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>React v0.9 RC - React Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="React v0.9 RC - React Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://facebook.github.io/react/blog/2014/02/16/react-v0.9-rc1.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="We&#39;re almost ready to release React v0.9! We&#39;re posting a release candidate so that you can test your apps on it; we&#39;d much prefer to find show-stopping bugs now rather than after we release.
">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">

  <div class="inner-content">
    

<h1>

  React v0.9 RC

</h1>

<p class="meta">
  February 16, 2014
  by
  
    
      <a href="http://benalpert.com">Ben Alpert</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>We&#39;re almost ready to release React v0.9! We&#39;re posting a release candidate so that you can test your apps on it; we&#39;d much prefer to find show-stopping bugs now rather than after we release.</p>

<p>The release candidate is available for download from the CDN:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.9.0-rc1.js">https://fb.me/react-0.9.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.9.0-rc1.min.js">https://fb.me/react-0.9.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.9.0-rc1.js">https://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.9.0-rc1.min.js">https://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.9.0-rc1.js">https://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>

<h2>Upgrade Notes</h2>

<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
  Monkeys:
  {listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
  <span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
  <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll">  <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll">  <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.</p>

<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{&quot;Monkeys: &quot;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>

<h2>Changelog</h2>

<h3>React Core</h3>

<h4>Breaking Changes</h4>

<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>

<h4>New Features</h4>

<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:

<ul>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>

<h4>Bug Fixes</h4>

<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>

<h3>React with Addons</h3>

<ul>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>

<h3>JSX Compiler and react-tools Package</h3>

<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>

</div>


  <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>


  </div>
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/react/blog/2017/04/07/react-v15.5.0.html">React v15.5.0</a></li>
      
        <li><a href="/react/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/react/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/react/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/react/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
      <li><a href="/react/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
